$(function() {
  //1.首页渲染
  var currentPage = 1;
  var pageSize = 5;
  function render() {
    $.ajax({
      type: "get",
      url: "/product/queryProductDetailList",
      data: {
        page: currentPage,
        pageSize: pageSize
      },
      dataType: "json",
      success: function(res) {
        //成功的回调函数
        console.log(res);
        // 组合
        var str = template("tmp", res);
        $("tbody").html(str);
        setPage(res.total);
      }
    });
  }
  render();

  // 2.分页
  function setPage(total) {
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3, //默认是2，如果是bootstrap3版本，这个参数必填
      currentPage: currentPage, //当前页
      totalPages: Math.ceil(total / pageSize), //总页数
      onPageClicked: function(event, originalEvent, type, page) {
        //为按钮绑定点击事件 page:当前点击的按钮值
        currentPage = page;
        // 别忘记
        render();
      }
    });
  }

  // 3.下拉列表的填充
  $.ajax({
    type: "get",
    url: "/category/querySecondCategoryPaging",
    data: {
      page: 1,
      pageSize: 100
    },
    dataType: "json",
    success: function(res) {
      //成功的回调函数
      console.log(res);
      var str = template("second-tmp");
      $(".cate-two-list").html(template("second-tmp", res));
    }
  });

  // 4.点击下拉列表的数据，赋给按钮，把id赋给隐藏域
  $(".cate-two-list").on("click", "a", function() {
    $(".cate-title").text($(this).text());
    $("#brandId").val($(this).data("id"));
    // 7.
    $(".add-form")
      .data("bootstrapValidator")
      .updateStatus("brandId", "VALID");
  });

  var picArr = [];
  // 5.图片上传：只保留三张图片，后添加的图片放在前面，图片预览。
  $("#file").fileupload({
    dataType: "json",
    //e：事件对象
    //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
    done: function(e, data) {
      // pic的名字和地址
      console.log(data.result);
      // 记录图图片顺序
      var img = data.result;
      picArr.unshift(img);
      // 预览图片(在装图片的盒子里写一个img标签)
      $(".img-box").prepend(
        '<img src="' + img.picAddr + '" alt="" height="60">'
      );
      // 判断图片是否大于三张
      if (picArr.length > 3) {
        // 数组删除最后一个
        picArr.pop();
        // 装图片的盒子删除最后一张
        $(".img-box img:last-child").remove();
      }
      // 如果图片合理，把图片的地址赋值给图片的隐藏域
      if (picArr.length == 3) {
        // 数组里面存放的图片信息赋值给隐藏域
        $("#picArr").val(JSON.stringify(picArr));
        // 7.
        $(".add-form")
          .data("bootstrapValidator")
          .updateStatus("picArr", "VALID");
      }
    }
  });

  // 6.对表单进行校验
  $(".add-form").bootstrapValidator({
    //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
    excluded: [":disabled"],

    //2. 指定校验时的图标显示，默认是bootstrap风格
    feedbackIcons: {
      valid: "glyphicon glyphicon-ok",
      invalid: "glyphicon glyphicon-remove",
      validating: "glyphicon glyphicon-refresh"
    },

    //3. 指定校验字段
    fields: {
      //校验用户名，对应name表单的name属性
      brandId: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入二级分类"
          }
        }
      },
      proName: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入商品名称"
          }
        }
      },
      proDesc: {
        validators: {
          //不能为空
          notEmpty: {
            message: "输入商品描述"
          }
        }
      },
      num: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入商品库存"
          }
        },
        regexp: {
          regexp: /^[1-9]\d*$/,
          message: "库存必须是非0开头的数字"
        }
      },
      size: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入商品尺寸"
          }
        },
        regexp: {
          regexp: /^[1-9]\d-[1-9]\d$/,
          message: "尺寸格式xx-xx"
        }
      },
      oldPrice: {
        validators: {
          //不能为空
          notEmpty: {
            message: "输入商品原价"
          }
        }
      },
      price: {
        validators: {
          //不能为空
          notEmpty: {
            message: "输入商品现价"
          }
        }
      },
      picArr: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请上传三张图片"
          }
        }
      }
    }
  });

  // 7.手动修改下拉框和图片的状态
  // 1.在下拉框选中完成时，手动改校验状态为正确。
  // 2.在上传图片为三张时，手动校验状态为正确。

  // 8.添加商品
  // 1.点击添加按钮，在表单数据合理的情况下，向后台发送请求。
  // 2.后台添加成功，前端页面重新渲染，隐藏模态框。表单重置，手动清空下拉框和图片的状态。
  $(".add-form").on("success.form.bv", function(e) {
    e.preventDefault();
    //使用ajax提交逻辑
    $.ajax({
      type: "post",
      url: "/product/addProduct",
      data: $(".add-form").serialize(),
      dataType: "json",
      success: function(res) {
        //成功的回调函数
        console.log(res);
        // 页面重新渲染
        render();
        // 隐藏模态框
        $(".modal-add").modal("hide");
        // 表单重置
        $(".add-form")
          .data("bootstrapValidator")
          .resetForm(true);
        // 手动清空下拉菜单和图片的内容
        $(".cate-title").text("请输入二级分类");
        // $(".img-box").empty();
        $(".img-box img").remove();
        // 清空数组
        picArr = [];
      }
    });
  });
});
